<template>
  <div id="app">
    <audio
      ref="audio"
      autoplay
      @timeupdate="tiem()"
      @canplay="get_music_time_length()"
      @play="paly_icon()"
      @pause="pause_icon()"
      :src="this.$store.state.src"
    ></audio>

    <!-- 播放时视频 -->
    <router-view />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      aa: "",
    };
  },
  methods: {
    // 获取正在播放时长并格式化
    tiem(e) {
      let times = this.$store.state.audio.currentTime * 1000;
      this.$store.commit("current_time", this.init_time(times));
      this.player_lenth();
      // 判断是否进入歌词页面
    },
    // 获取正在播放歌曲的总时长
    get_music_time_length() {
      let times = this.$store.state.audio.duration * 1000;
      this.$store.commit("music_total_time", this.init_time(times));
      this.get_friends();
    },
    // 格式化时间
    init_time(times) {
      let t = "";
      let m =
        Math.floor(times / 1000 / 60) < 10
          ? "0" + Math.floor(times / 1000 / 60)
          : Math.floor(times / 1000 / 60);
      let s =
        Math.floor((times / 1000) % 60) < 10
          ? "0" + Math.floor((times / 1000) % 60)
          : Math.floor((times / 1000) % 60);
      t = `${m}:${s}`;
      return t;
    },
    // 获取正在播放的时长和总时长的比例 用于制作进度条
    player_lenth() {
      let times = this.$store.state.audio.currentTime;
      // console.log(times);
      let get_music_time_length = this.$store.state.audio.duration;
      // 这是进度条的进度
      let a = (times / get_music_time_length) * 100;
      // 将进度条的进度发送给vuex
      this.$store.commit("player_lenth", a);

      // 判断是否有没有到歌词页面  并且  拿到每一句歌词 和  歌词盒子 的节点
      if (this.$store.state.lyric_box && this.$store.state.gc) {
        // 遍历处理好的歌词
        for (let i = 0; i < this.$store.state.lyric.length; i++) {
          // 判断当前的播放是否超出歌词的或者成语歌词自带的时间
          if (
            this.$store.state.audio.currentTime >
            this.$store.state.lyric[i].time
          ) {
            // 拿到播放时间和歌词自带的时间相等的那个节点的自定义属性index
            let index = Number(this.$store.state.gc[i].dataset.index);

            // 判断当前的i是否与自定义属性的值相等
            if (i === index) {
              // 修改修改歌词高亮的下标
              this.$store.commit("lyric_active_index", i);

              // 修改歌词盒子的transfrom的 translateY   170是歌词初始化的位置  30 是高亮歌词的高度
              this.$store.state.lyric_box.style.transform = `translateY(${
                200 - 38 * (i + 1)
              }px)`;
            }
          }
        }
      }
    },
    // 修改播放的图标
    paly_icon() {
      this.$store.commit("paly_icon", true);
    },
    // 修改暂停的图标 如果歌曲已经结束 那就调用下一首的方法
    pause_icon() {
      this.$store.commit("paly_icon", false);
      if (this.$store.state.player_lenth === 100) {
        // 拿到vuex的播放列表
        let play_list = this.$store.state.play_list;
        // 获取正在播放列表的
        let musis_info = this.$store.state.musis_info;

        let index = "";

        // 遍历播放列表
        if (play_list.length <= 1) {
          // 这是列表只有一首歌的时候就让他循环播放
          this.$store.state.audio.play();
          return;
        }
        for (let i = 0; i < play_list.length; i++) {
          if (play_list[i].id === musis_info.id) {
            index = i;
            break;
          }
        }
        if (!play_list[index + 1]) {
          // 这是播放列表有两首首以上的歌曲, 并且最后一首播放完后将最后跳转至第一首进行播放
          this.$store.commit("musis_info", this.$store.state.play_list[0]);
          this.$store.commit("src_id", this.$store.state.play_list[0].id);
          this.$store.dispatch("get_src");
          return;
        }
        this.$store.commit(
          "musis_info",
          this.$store.state.play_list[index + 1]
        );
        this.$store.commit("src_id", this.$store.state.play_list[index + 1].id);
        this.$store.dispatch("get_src");
        console.log(this.$store.state.play_list);
      }
    },

    // 获取到歌词
    get_friends() {
      // if (this.$store.state.musis_info.type === "programDetail") {
      //   let arr = this.$store.state.musis_info.description.split("\n");
      //   let array = [];
      //   arr.forEach((v) => {
      //     let str = { str: v };
      //     array.push(str);
      //   });
      //   this.$store.commit("lyric", array);
      //   return;
      // }
      this.axios({
        method: "get",
        url: "/lyric",
        params: {
          id: this.$store.state.musis_info.id,
        },
      })
        .then((res) => {
          console.log("我是歌词", res);
          if (res.data.lrc) {
            this.lyric(res.data.lrc.lyric);
            console.log("打印一下歌词", this.$store.state.lyric);
          }else{
            this.$store.commit("lyric", [{ str: "我没有歌词", time: 0 }]);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 处理歌词格式的方法
    lyric(str) {
      //先将字符串全部拆分开来得到每一行
      if (str === "" || str === null) {
        this.$store.commit("lyric", [{ str: "我没有歌词", time: 0 }]);
        return;
      }

      let tempArr = str.match(/\[(.*?):(.*?)\](.*?)\n/g);
      let arr = [];
      for (let temp of tempArr) {
        //对每一行进行拆分得到每一行中各个数据
        let tempItem = temp.match(/\[(.*?):(.*?)\](.*?)\n/);
        //将拆分好的数据push到新的数组中
        arr.push({
          time: this.timeEvent(tempItem[1] + ":" + tempItem[2]),
          str: tempItem[3],
        });
      }

      this.$store.commit("lyric", arr);
    },

    // 处理时间的方法
    timeEvent(e) {
      let time = e;
      var len = time.split(":");
      if (len.length == 3) {
        var hour = time.split(":")[0];
        var min = time.split(":")[1];
        var sec = time.split(":")[2];
        return Number(hour * 3600) + Number(min * 60) + Number(sec);
      }
      if (len.length == 2) {
        var min = time.split(":")[0];
        var sec = time.split(":")[1];
        return Number(min * 60) + Number(sec);
      }
      if (len.length == 1) {
        var sec = time.split(":")[0];
        return Number(sec);
      }
    },
  },
};
</script>

<style lang="less">
html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  background-image: url(./assets/images/bg.jpg);
  background-size: cover;
}
</style>
